@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2*1px;
}
$blue:#241f47;
$yellow: #fade5d;
@mixin transf{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
body{
    background: url(../img/bg.jpg) repeat;
}

//头部
header {
    .login {
        height: p(275); 
        background: url("../img/percenbg.jpg") no-repeat;
    }
    .loginTop {
        display: flex;
        font-size: p(36);
        color: #FFFFFF;
        justify-content: flex-start;
        .perconimgone {
            display: flex;
            display: inline-block;
            width: p(112);
            height: p(112);
            background: #FFFFFF;
            border: p(6) solid #636277;
            border-radius: 100%;
            margin-left: p(55);
            margin-top: p(85);
            justify-content: center;
            align-items: center;
            img{
                width: p(47);
                height: p(44);
                margin-left: p(30);
                margin-top: p(26);
            }
        }
        p{
            display: flex;
            font-size: p(36);
            color: #FFFFFF;
            padding-left: p(45);
            padding-top: p(96);
            a{
                color: #FFFFFF;
            }
        }
    }
    .loginUnder{
        display: flex;
        justify-content: flex-end;
        margin-top: p(8);
        margin-right: p(12);
        font-size: 0;
        span{
            font-size: p(20);
            color: #c4c4c4;
        }
    }
}
section{
    display: flex;
    justify-content: center;
    .contentList{
        display: flex;
        width: p(602);
        justify-content: center;
        flex-wrap: wrap;
        margin-top: p(19);
        a{
            width: 100%;
            display: flex;
            li{
            display: flex;
            width: p(600);
            height: p(80);
            background: #FFFFFF;
            border: p(1) solid #cacbcd;
            justify-content: space-between;
            align-items: center;
            padding-left: p(16);
            padding-right: p(18);
            .listLeft{
//              display: flex;
//              justify-content: flex-start;
                font-size: 0;
                img{
                    margin-right: p(28);
                }
                .myOrder{
                    width: p(32);
                    height: p(24);
                }
                .myCoupon{
                    width: p(32);
                    height: p(24);
                }
                .myBuy{
                    width: p(30);
                    height: p(30);
                }
                .myCollection{
                    width: p(31);
                    height: p(30);
                }
                .myShopCar{
                    width: p(32);
                    height: p(30); 
                }
                .myOrspyi{
                    font-size: p(26);
                    color: #606060;
//                  font-weight: bold;
                }
            }
            .myOrsper{
                font-size: p(30);
                color: #606060;
            }
        }
        .ListOne{
            margin-bottom: p(18);
        }
        }
        
    }
}
//底部导航
footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: p(93);
    border-top: p(2) solid $blue;
    background: url(../img/footerBg.jpg);
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            width: p(100);
            height: p(70);
            text-align: center;
            .navImg{
                display: inline-block;
                width: p(46);
                height: p(48);
                overflow: hidden;
                position: relative;
                font-size: 0;
                img{
                    width: 100%;
                    @include transf;
                }
            }
            .title{
                font-size: p(24);
                a{
                    color: $blue;
                }
            }
            .active{
                a{color: $yellow;}
            }
        }
    } 
}
